<template>
	<view class="container">
		<view class="service-content" v-for="(item,index) in listData" :key="index" @click="changePage(item)">
			<image :src="item.src" mode="scaleToFill"></image>
			<view class="text-box">
				<text class="text-1">{{item.text1}}</text>
				<text class="text-2">{{item.text2}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData: [{
					src: "../../../static/img/deng/lifajiandao.png",
					text1: "理发",
					text2: "按照残疾人需求，为老人上门服务。"
				}, {
					src: "../../../static/img/doctor.png",
					text1: "助医",
					text2: "按照残疾人需求，为老人上门服务。"
				}, {
					src: "../../../static/img/deng/xidi.png",
					text1: "洗涤",
					text2: "对床单、衣物等进行分类清洗并晾晒。"
				}, {
					src: "../../../static/img/deng/xizaomuyu.png",
					text1: "助浴",
					text2: "帮助残疾人洗澡清洗。"
				}, {
					src: "../../../static/img/deng/caozuo-kangfuxunlian.png",
					text1: "精神蔚籍",
					text2: "与残疾人保持良性互动，调节心理状况。"
				}, {
					src: "../../../static/img/deng/kangfuxunlian.png",
					text1: "康复训练",
					text2: "制定规范的家庭康复训练计划。"
				}],
			}
		},
		methods: {
			changePage(v) {
				uni.navigateTo({
					url: "../serviceInfo/serviceInfo?id="+v.text1
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.service-content {
		margin-top: 10px;
		width: 95%;
		height: 80px;
		box-shadow: 0px 0px 5px #9e9e9e;
		border-radius: 5px;
		display: flex;
		align-items: center;

		&>image {
			width: 50px;
			height: 50px;
			border-radius: 50px;
			background-color: #3774EC;
			margin-left: 10px;
		}

		;

		&>.text-box {
			display: flex;
			flex-direction: column;
			margin-left: 10px;
		}

		& .text-2 {
			font-size: 12px;
			color: #B5B5B5;
		}

	}
</style>
